<!-- 页面组件中使用 -->
<template>
	<view class="message-page">
		<div :style="{
				height:`${statusBarHeight}px`,
				background:'#2f9aff'
			}"></div>
		<view :style="{height: `${topHeight}px`,paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`}">
			<view class="message-title">
				<i class="clearIcon" @click="clearAll"></i>
				<text>我的消息</text>
			</view>
		</view>
		<view class="message-content" :style="{height: `calc(100% - ${contHeight}px)`}">
			<view class="message-screen">
				<view class="screen-Item inputBox">
					<up-input class="myInput" clearable placeholder="搜索" shape="circle" suffixIcon="search"
						:value="searchValue" suffixIconStyle="font-size: 22px;color: #909399" @confirm="confirm"
						@clear="searchclear"></up-input>
				</view>
				<view class="screen-Item tabBox">
					<view class="tabItem" v-for="(item,inx) in tabList" :key="inx" :class="{active:tabInx==inx}"
						@click="tabClick(inx)">
						<view>{{item.name}}</view>
						<text></text>
					</view>
				</view>
			</view>
			<scroll-view scroll-y class="content-Box" refresher-background="transparent" lower-threshold="20"
				@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="isRefreshing"
				@refresherrefresh="handleRefresh" v-if="dataList && dataList.length>0">
				<view class="content-item" v-for="(item,inx) in dataList" :key="inx">
					<view class="content-data" @click="messageClick(item)">
						<view class="item-left">
							<text v-if="item.num">{{item.num}}</text>
						</view>
						<view class="item-right">
							<view class="item-top">
								<text class="title black text-one">{{item.title}}</text>
								<text class="grey timeBox">{{item.time}}</text>
							</view>
							<view class="item-bot text-two">{{item.content}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
	import dayjs from 'dayjs/esm/index'
	const {
		proxy
	} = getCurrentInstance();
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	const total = ref(0); //数据总数
	const contHeight = ref(0); //内容高度
	const searchValue = ref()
	const tabList = ref([{
		name: "全部",
		value: ""
	}, {
		name: "已读",
		value: "read"
	}, {
		name: "未读",
		value: "unread"
	}]);
	const queryObj = ref({
		data: {
			category: "",
			content: "",
			createName: "",
			isDelete: "",
			userId: "1",
			isSend: "",
			readStatus: "",
			messageSource: "",
			receiverType: "",
			sendPolicy: "",
			sendTime: null,
			title: "",
			type: "",
			updateName: "",
		},
		pageNum: 1,
		pageSize: 10
	});
	const tabInx = ref(0); //tab选中下标
	const isRefreshing = ref(false)
	const dataList = ref([]);
	onMounted(() => {
		getList()
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		contHeight.value = topHeight.value + statusBarHeight.value
	});
	onShow((e)=>{
		const params = uni.getStorageSync('messagereadStatus');
		console.log('params=======>',params)
		if (params) {
		  tabInx.value = params.messagereadStatus
		  queryObj.value.data.readStatus = tabList.value[tabInx.value].value
		  dataList.value = []
		  uni.removeStorageSync('messagereadStatus');
		}
	});
	const handleRefresh = async () => {
		clearList()
		getList('refresh')
	}
	const getList = async (type) => {
		console.log(3243)
		if (type === 'refresh') {
			isRefreshing.value = true
		}
		proxy.$http.POST('/aom/wechat/queryCommon', {
			obj:queryObj.value,
			url:"queryPageMessageInfo"
		}).then((res) => {
			console.log(res)
			if (res.flag) {
				for (let k of res.data.list) {
					k.time = dayjs(k.sendTime).format("YYYY-MM-DD")
				}
				isRefreshing.value = false
				total.value = res.data.total
				dataList.value = [...dataList.value, ...res.data.list]
			}
		})


	};
	const tabClick = (n) => {
		console.log(n)
		tabInx.value = n
		queryObj.value.data.readStatus = tabList.value[n].value
		dataList.value = []
		getList()
	};
	const scrolltolower = () => {
		if (total.value > dataList.value.length) {
			queryObj.value.pageNum += 1
			getList()
		}
		console.log("到底了")
	};
	const clearList = (n) => {
		dataList.value = []
		queryObj.value.pageNum = 1
	};
	const confirm = (n) => {
		queryObj.value.data.title = n
		clearList()
		getList()
		console.log("搜索", n)
	};
	const searchclear = (n) => {
		console.log("清除", n)
		queryObj.value.data.title = n
		clearList()
		getList()
	};
	const messageClick = (item) => {
		if (item.readStatus == "read") {
			return false
		}
		let param = {obj:{
			messageId: item.messageId,
			readStatus: "read",
			userId: "1"
		},url:'updateMessageReceiverRelation'}
		proxy.$http.POST('/aom/wechat/queryCommon', param).then((res) => {
			console.log(res)
			if (res.flag) {
				setTimeout(() => {
					dataList.value = []
					getList()
				}, 500)

			}
		})
	};
	const clearAll = (n) => {
		console.log("点击左上角", n)
	};
</script>

<style scoped lang="scss">
	.text-one {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.text-two {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.text-three {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.message-page {
		background: #ffffff;
		height: 100vh;
	}

	.message-title {
		height: 100%;
		font-size: 38rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.clearIcon {
			position: absolute;
			height: 100%;
			width: 80rpx;
			background: url(/static/images/message/clearIcon.png)no-repeat center;
			background-size: 50%;
			left: 0;
			top: 0;
		}
	}

	.message-content {
		background: #F2F6F5;

		.message-screen {
			padding: 0 30rpx;
			width: 100%;
			height: 200rpx;
			box-sizing: border-box;

			.screen-Item {
				height: 50%;
				width: 100%;
			}

			.inputBox {
				display: flex;
				align-items: flex-end;

				.myInput {
					height: 75%;
					padding-left: 40rpx !important;
					background: #fff;
				}
			}

			.tabBox {
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				margin-left: 30rpx;

				.tabItem {
					margin-right: 50rpx;

					text {
						display: block;
						width: 80%;
						height: 8rpx;
						border-radius: 5rpx;
						margin: 15rpx auto 0;
					}
				}

				.active {
					color: rgb(1, 112, 106) !important;
					font-weight: 600;

					text {
						background: rgb(1, 112, 106) !important;
					}
				}
			}

		}

		.content-Box {
			width: 100%;
			height: calc(100% - 200rpx);
			overflow: scroll;

			.content-item {
				width: 100%;
				height: 160rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-bottom: 1rpx solid #d6d6d6;

				.content-data {
					width: 100%;
					// height: 100rpx;
					display: flex;
					justify-content: space-between;

					.item-left {
						width: 100rpx;
						height: 100rpx;
						background: url(/static/images/message/messageIcon.png)no-repeat center;
						background-size: contain;
						position: relative;

						text {
							position: absolute;
							font-size: 20rpx;
							width: 30rpx;
							height: 30rpx;
							background: #DC273D;
							color: #fff;
							right: -10rpx;
							top: -10rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.item-right {
						width: calc(100% - 120rpx);

						.item-top {
							// height: 50%;
							margin-bottom: 10rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 24rpx;

							.title {
								font-size: 32rpx;
								font-weight: 600;
								height: 40rpx;
							}

							.timeBox {
								width: 140rpx;
								white-space: nowrap;
							}
						}

						.item-bot {
							// height: 50%;
							color: #808080;
							font-size: 26rpx;
						}
					}
				}


			}

		}
	}

	.black {
		color: #3C3C3C;
	}

	.grey {
		color: #9E9E9E;
	}
</style>